<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理</title>
    <!---公用样式--->
    <style type="text/css">
        html,body{
            margin:0;padding:0;height:100vh;width:100vw;
        }
        footer{
            background: #36a7e3;max-width:100vw;width: 100%;height: 8vh;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: nowrap;
            flex-direction: row;
            align-items: center;
        }
        /* scroll滚动条设置*/
        ::-webkit-scrollbar{
            width: 0px; height: 0px;background-color: #fff;
        }
        .box{
            display:flex;display: -webkit-flex;height:100%;flex-direction:column;
            font-size: 3rem;
        }
        .box .roll{
            flex: 1; width: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
        }
        /*    设置底部区域*/
        footer div {
            color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: space-around;
        }
        footer div .tab-text {
            font-weight: 300;
            font-size: 2.8rem;
        }
    </style>
</head>
<body>
<!--https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=34056-->

<!--https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=34101-->
<div class="box">
    <div class="roll">滚动区域</div>
    <footer>
        <div>
            <div class="tab-icon">
                <svg t="1627633651564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1145" width="64" height="64"><path d="M341.333333 469.333333H256a42.666667 42.666667 0 0 1 0-85.333333h85.333333a42.666667 42.666667 0 0 1 0 85.333333zM341.333333 640H256a42.666667 42.666667 0 0 1 0-85.333333h85.333333a42.666667 42.666667 0 0 1 0 85.333333zM640 597.333333a213.333333 213.333333 0 1 1 213.333333-213.333333 213.333333 213.333333 0 0 1-213.333333 213.333333z m0-341.333333a128 128 0 1 0 128 128 128 128 0 0 0-128-128z" p-id="1146" fill="#FFFFFF"></path><path d="M878.933333 938.666667H401.066667A59.733333 59.733333 0 0 1 341.333333 878.933333V810.666667a298.666667 298.666667 0 0 1 597.333334 0v68.266666a59.733333 59.733333 0 0 1-59.733334 59.733334zM426.666667 853.333333h426.666666v-42.666666a213.333333 213.333333 0 0 0-426.666666 0z" p-id="1147" fill="#FFFFFF"></path><path d="M469.333333 938.666667H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333334V325.12a85.333333 85.333333 0 0 1 47.36-76.373333l256-128A85.333333 85.333333 0 0 1 512 197.12V384a42.666667 42.666667 0 0 1-85.333333 0V197.12l-256 128V853.333333h298.666666a42.666667 42.666667 0 0 1 0 85.333334z" p-id="1148" fill="#ffffff"></path></svg>
            </div>
            <div class="tab-text">我的</div>
        </div>
        <div>
            <div class="tab-icon">
                <svg t="1627634286049" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1145" width="64" height="64"><path d="M682.666667 725.333333H341.333333a42.666667 42.666667 0 0 1 0-85.333333h341.333334a42.666667 42.666667 0 0 1 0 85.333333zM597.333333 554.666667H341.333333a42.666667 42.666667 0 0 1 0-85.333334h256a42.666667 42.666667 0 0 1 0 85.333334z" p-id="1146" fill="#FFFFFF"></path><path d="M810.666667 981.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h128a42.666667 42.666667 0 0 1 0 85.333333H213.333333v682.666667h597.333334V213.333333h-124.16a42.666667 42.666667 0 0 1 0-85.333333H810.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v682.666667a85.333333 85.333333 0 0 1-85.333333 85.333333z" p-id="1147" fill="#FFFFFF"></path><path d="M640 298.666667H384a85.333333 85.333333 0 0 1-85.333333-85.333334V128a85.333333 85.333333 0 0 1 85.333333-85.333333h256a85.333333 85.333333 0 0 1 85.333333 85.333333v85.333333a85.333333 85.333333 0 0 1-85.333333 85.333334zM384 128v85.333333h256V128z" p-id="1148" fill="#FFFFFF"></path></svg>
            </div>
            <div class="tab-text">配置</div>
        </div>
<!--        <div>-->
<!--            <div class="tab-icon">-->
<!--                <svg t="1627634064535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1017" width="64" height="64"><path d="M587.989333 128c9.941333 0 18.005333 8.064 18.005334 17.962667v81.152a307.285333 307.285333 0 0 1 73.898666 42.709333l70.442667-40.618667a18.048 18.048 0 0 1 24.576 6.613334l97.322667 168.362666a17.92 17.92 0 0 1-3.584 22.442667l-2.986667 2.133333-70.4 40.576a309.589333 309.589333 0 0 1 0 85.333334l70.4 40.576a17.92 17.92 0 0 1 6.613333 24.533333l-97.365333 168.405333a18.048 18.048 0 0 1-24.576 6.613334l-70.4-40.618667a307.285333 307.285333 0 0 1-73.941333 42.666667v81.194666a17.962667 17.962667 0 0 1-18.005334 17.962667H393.386667a17.962667 17.962667 0 0 1-18.005334-17.962667v-81.152a307.285333 307.285333 0 0 1-73.898666-42.709333l-70.442667 40.618667a18.048 18.048 0 0 1-24.576-6.613334l-97.322667-168.362666A17.92 17.92 0 0 1 112.682667 597.333333l2.986666-2.133333L186.069333 554.666667a309.589333 309.589333 0 0 1 0-85.333334l-70.4-40.576a17.92 17.92 0 0 1-6.613333-24.533333l97.365333-168.405333a18.048 18.048 0 0 1 24.576-6.613334l70.4 40.618667a307.285333 307.285333 0 0 1 73.941334-42.666667V145.92c0-9.898667 8.064-17.962667 18.005333-17.962667h194.645333z m-35.968 53.930667h-122.752v81.578666l-33.706666 13.653334c-17.493333 7.04-34.133333 16.042667-49.578667 26.794666l-11.349333 8.405334-28.672 22.357333-70.826667-40.874667-61.354667 106.154667 70.741334 40.789333-5.034667 36.010667a255.658667 255.658667 0 0 0-1.322667 58.794667l1.322667 11.605333 5.034667 36.010667-70.741334 40.746666 61.354667 106.154667 70.826667-40.832 28.672 22.357333c14.848 11.605333 30.933333 21.546667 48 29.568l12.928 5.674667 33.706666 13.653333v81.493334h122.752v-81.493334l33.749334-13.653333c17.493333-7.082667 34.133333-16.085333 49.578666-26.837333l11.349334-8.405334 28.672-22.357333 70.784 40.832 61.354666-106.154667-70.698666-40.746666 5.034666-36.010667a255.658667 255.658667 0 0 0 1.322667-58.794667l-1.322667-11.605333-5.034666-36.010667 70.698666-40.789333-61.354666-106.154667-70.826667 40.874667-28.586667-22.357333a253.696 253.696 0 0 0-48.042666-29.568l-12.928-5.674667-33.706667-13.653333-0.042667-81.536zM490.666667 358.4a153.514667 153.514667 0 0 1 153.429333 153.6c0 84.821333-68.693333 153.6-153.429333 153.6A153.514667 153.514667 0 0 1 337.237333 512c0-84.821333 68.693333-153.6 153.429334-153.6z m0 53.930667A99.584 99.584 0 0 0 391.168 512a99.584 99.584 0 0 0 99.498667 99.669333A99.584 99.584 0 0 0 590.165333 512 99.584 99.584 0 0 0 490.666667 412.330667z" fill="#FFFFFF" p-id="1018"></path></svg>-->
<!--            </div>-->
<!--            <div class="tab-text">设置</div>-->
<!--        </div>-->
    </footer>
</div>

</body>
</html>